<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <base href="${rc.contextPath}/">
    <title>出入码</title>
    <link rel="stylesheet" href="static/weui/css/weui.css"/>
    <link rel="stylesheet" href="static/weui/css/weuix.css"/>
    <script src="static/weui/js/zepto.min.js"></script>
    <script src="static/weui/js/zepto.weui.js"></script>
    <script src="static/weui/js/qrcode.js"></script>
    <script src="static/weui/js/gateway.js"></script>
    <script>
        $(function () {
            var mobile = '${(userKey.mobile)!}';
            if (mobile == '') {
                window.location.href = "login";
            }
        });


        function image2canvas(image) {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            return canvas;
        }

        function canvas2image(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        function qr() {
            $.ajax({
                type: "post",
                url: 'api/createQrCode',
                data: '',
                async: false,
                timeout: 3000,
                success: function (res) {
                    if (res.code != 0) {
                        alert(res.msg);
                    }
					var data = res.data.accountId + ',' +  res.data.timeStamp;
                    var qrCanvas =null;
                    if(res.data.tn == 1){
						qrCanvas = qrcanvas.qrcanvas({
							data: data,
							size: 300,
							foreground: 'green',
							background: 'white'
						});
					}else {
						qrCanvas = qrcanvas.qrcanvas({
							data: data,
							size: 300,
							foreground: 'red',
							background: 'white'
						});
					}

                    $("#qr").empty().html(canvas2image(qrCanvas))

                },
                error: function (res) {
                    $.alert("与服务器通信失败，请检查服务器ip地址是否正确", "提示");
                }
            });
        }

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString() // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                }
                ;
            }
            ;
            return fmt;
        }

        function his() {
            $.ajax({
                type: "post",
                url: 'api/recordHis',
                data: '',
                async: false,
                timeout: 3000,
                success: function (res) {
                    var list = res.data;
                    $("#hisContent").html('');
                    if (list == null || list.length == 0) {
                        $("#hisContent").append(createHisNode('暂无出入信息', dateFormat("YYYY-mm-dd HH:MM:SS", new Date()), true));
                    } else {
                        $("#hisContent").append(createHisCodeNode(list[0], true));
                        for (var i = 1; i < list.length; i++) {
                            $("#hisContent").append(createHisCodeNode(list[i], false));
                        }
                    }

                },
                error: function (res) {
                    $.alert("与服务器通信失败，请检查服务器ip地址是否正确", "提示");
                }
            });
        }

        function createHisNode(msg, timeStr, recent) {
            var base = '<li class="timeline-item"><div class="timeline-item-color timeline-item-head-first"><i class="timeline-item-checked   weui-icon-success-no-circle"></i></div><div class="timeline-item-tail"></div><div class="timeline-item-content"><h4 class="recent">' + msg + '</h4>';
            if (timeStr != null) {
                if (recent) {
                    base = base + '<p class="recent">' + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(timeStr)) + '</p>'
                } else {
                    base = base + '<p>' + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(timeStr)) + '</p>'
                }
            }
            base = base + '</div></li>';
            return base;
        }

        function createHisCodeNode(codeHis, recent) {
            var timeStr = codeHis.entryTimeStr;
            var entryType = codeHis.entryType;
            var gateName = codeHis.gateName;
            var base = '<li class="timeline-item"><div class="timeline-item-color timeline-item-head-first"><i class="timeline-item-checked   weui-icon-success-no-circle"></i></div><div class="timeline-item-tail"></div><div class="timeline-item-content"><h4 class="recent">' + entryType +'（'+gateName+'）' + '</h4>';
            if (timeStr != null) {
                if (recent) {
                    base = base + '<p class="recent">' + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(timeStr)) + '</p>'
                } else {
                    base = base + '<p>' + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(timeStr)) + '</p>'
                }
            }
            base = base + '</div></li>';
            return base;
        }
    </script>
    <script>
        $(function () {
            $('.weui-tab').tab({
                defaultIndex: 0,
                activeClass: 'weui-bar__item_on',
                onToggle: function (index) {
                    if (index == 0) {
                        qr();
                    } else if (index == 1) {
                        his();
                    }
                }
            })
        })
    </script>
</head>

<body ontouchstart>
<div class="weui-tab" style="height:auto;">
    <div class="weui-tab__panel">
        <!-----------------------------------------------------------亮码---------------------------------------------------------------------->
        <div id="c0" class="weui-tab__content">
            <h4 id="name" class="tcenter" style="margin-top: 60px;">${userKey.name!}：${userKey.mobile!}</h4>
            <div id="qr" class='tcenter fadeIn animated margin10-t' style="margin-top: 20px;"></div>
            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_default" href="javascript:qr()" id="showTooltips" style="width:304px">刷&nbsp;&nbsp;&nbsp;新</a>
            </div>
        </div>


        <!-----------------------------------------------------------出入记录---------------------------------------------------------------------->
        <div id="c1" class="weui-tab__content">

            <div class="weui-loadmore weui-loadmore_line">
				<span class="weui-loadmore__tips">
					<span id="myCode" class=" yahei color-success bold"  style="font-size: 22px;">出入记录</span>
				</span>
				<div class="timeline">
					<ul id="hisContent">
						<!--出入内容-->
					</ul>
				</div>
            </div>
		</div>
	</div>
	<div class="weui-tabbar tab-bottom">
		<a href="javascript:;" class="weui-tabbar__item">
			<span style="display: inline-block;position: relative;">
				<i class="icon icon-25 f27 weui-tabbar__icon"></i>
			</span>
			<p class="weui-tabbar__label">出入码</p>
		</a>
		<a href="javascript:;" class="weui-tabbar__item">
			<i class="icon icon-67 f27 weui-tabbar__icon"></i>
			<p class="weui-tabbar__label">出入记录</p>
		</a>
	</div>
</div>
</body>
</html>